<!DOCTYPE html>
<html>
	<head>
		<title>Space Shooter- Preview</title>
		<link rel="stylesheet" type="text/css" href="style.css"/> 
		
		 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">		
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		
		<script>
			(function () {
				var match,
				pl = /\+/g, // Regex for replacing addition symbol with a space
				search = /([^&=]+)=?([^&]*)/g,
				decode = function (s) {
					return decodeURIComponent(s.replace(pl, " "));
				},
				query = window.location.search.substring(1);

				var urlParams = {};
				while (match = search.exec(query))
					urlParams[decode(match[1])] = decode(match[2]);

				window.fileName = urlParams["fileName"];
				window.folderName = urlParams["folderName"];
				window.turkSubmitTo = urlParams["turkSubmitTo"];
				window.assignmentId = urlParams["assignmentId"];
				window.url = "index.html?folderName=" + window.folderName + "&fileName=" + window.fileName + "&turkSubmitTo=" + turkSubmitTo + "&assignmentId=" + window.assignmentId;				
			})();
			function goToGame()
			{
			window.location = window.url;
			}
		</script>
		<script type="text/javascript" src="js/jquery.timer.js"></script>
		<script type="text/javascript" src="js/timer.js"></script>
		<script type="text/javascript" src="JS/controllerPreview.js"></script>
		<script type='text/javascript' src='https://www.google.com/jsapi'></script>
		<script type="text/javascript" src="JS/feulChart.js"></script>
	</head>
	<body>
	<h1 style="text-align:center">Game Preview</h1>
	
		<div id="game">
		<!-- The canvas for the panning background -->
		<canvas id="background" width="900" height="600">
			Your browser does not support canvas. Please try again with a different browser.
		</canvas>
		<!-- The canvas for all enemy ships and bullets -->
		<canvas id="main" width="900" height="600">
		</canvas>
		 <canvas id="feulstation" width="900" height="600">
		</canvas>
		<!-- The canvas the ship uses (can only move up
         one forth the screen. -->
		<canvas id="ship" width="900" height="600">
		</canvas>
        <canvas id="feulship" width="900" height="600">
		</canvas>
		  <canvas id="scoreCan" width="900" height="600">
		</canvas>
         <canvas id="scoreCanFace" width="900" height="600">
		</canvas>
          <canvas id="alertCan" width="900" height="600">
		</canvas>
		<div id="feul">
      
	
		 <div id="feulChart"></div>
	<!--	<p style="position:absolute;top:200px;left:80px;font-size:15px"><span id="gaugePre" style="font-size:25px"></span>sec</p> -->
		</div>
		
		<div id="maintenance">
        <div class="maintenance">
         <button id="maintenanceButton" onclick="maintenanceActionDone()" style="display:inline-block">Maintenance<br />
             Cost: <span id="mainCost"></span> points</button>
        </div>
        </div>
		<div id="tec">
		 <p>MECHANICAL CONDITION</p>	
        <canvas id="techStatus" width="190" height="258" >[No canvas support]</canvas>		 
		 <p id="mechTitle">all well</p>
          <button id="repairButton" onclick="mechanicalActionDone()">Repair<br />Cost: <span id="repCost"></span> points</button> 
		</div>
		
		<p id="freezeTitle">The space ship is frozen because of <span id="freezeReason"></span> <span id="freezeSec"></span> sec</p>
		
		<div class="score">
        <p>YOUR SCORE: <span id="score"></span></p>
		<p>LEFT TIME: <span id="time">00:00 m</span></p>
        </div>
		<div class="game-over" id="game-over">GAME OVER</br>Your score is:<span id="endScore"></span><p><span onclick="game.restart()">Restart</span></p></div>
		<div class="loading" id="loading">LOADING...<p>Please wait</p></div>
        </div>
		<div style="text-align:center;z-index:5000">
		
		</div>
		<script src="JS/game.js"></script>	
		<div id="dialog-message" title=""></div>

	</body>
</html>
